import React, { useState, useEffect, useRef, useCallback, useMemo, useImperativeHandle } from 'react';
import TreeList, { Column, RowDragging } from 'devextreme-react/tree-list';
import { detailDelList, fjUnchain } from '@/pages/AuditAttach/service';
import { CpasIcon, DevPopup } from '~/public/cpas-ui';
import { Popover, Typography } from 'antd';
import { useModel } from 'umi';
import { openFile } from '@/utils/electronUtil';
import List from 'devextreme-react/list';
import { RawSvgIconByDevExpress } from '~/public/cpas-ui/components-ui/components/Icon/CpasIcon';
import { getCpasIcon } from '@/utils/icon';
import notify from 'devextreme/ui/notify';
import { fjAndDgDataCode, resDataFilter } from '@/utils';

const { Text } = Typography;


const DgAttach: React.FC<any> = React.forwardRef(({ fjid }: any, ref) => {
  const { initialState } = useModel('@@initialState');
  const { dbname, zcbfid, sjxmbh } = initialState?.curPart as API.CurPart;

  const [fjData, setFjData] = useState<any>([])
  const DevPopupRef = useRef<any>();

  const featData = async (dataObj: any) => {
    const r = await detailDelList({
      dbname,
      fjid: dataObj.fjid
    })
    if (r.success) {
      setFjData(r.data);
    } else {
      setFjData([]);
    }
  }

  // 自定义方法
  useImperativeHandle(ref, () => ({
    refresh: (dataobj: any) => {
      featData(dataobj);
    },
  }));

  const fjUnchainEvent = async (data: any) => {
    DevPopupRef.current.show({
      title: "提示",
      okCallback: async () => {
        const res = await fjUnchain(dbname, data.dgid, fjid);
        if (res.success) {
          notify("解除底稿关联成功", "success", 2000);
          featData({ fjid });
        } else {
          notify("解除底稿关联失败", "error", 2000);
        }
      }
    })
  }

  return (
    <div>
      <TreeList
        className='PaperTreeList'
        dataSource={fjData}
        keyExpr="dgid"
        autoExpandAll={true}
        showColumnHeaders={false}
        hoverStateEnabled={true}
        columnAutoWidth={true}
        onCellDblClick={(e: any) => {
          const { data } = e;
          openFile([sjxmbh, zcbfid, '底稿', data.dgnd + '_' + data.dgmc + data.dglx].join('/'));
        }}
      >
        <Column
          dataField="dgmc"
          cellRender={(cell) => {
            const { data } = cell;
            return <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ width: 'calc(100% - 20px)', padding: '0 8px', height: '100%' }}>
                <span style={{ marginRight: '5px' }}> {getCpasIcon(data.dglx)}</span>
                <Text style={{ width: 'calc(100% - 25px)' }} ellipsis={{ tooltip: `${data.dgnd}${data.dgmc}${data.dglx}` }}>
                  {data.dgnd}{data.dgmc}{data.dglx}
                </Text>
              </div>
              <CpasIcon type='icon-jiechuyinyong' fontSize={18} onClick={() => {
                fjUnchainEvent(data);
              }} />
            </div>
          }}
        />
      </TreeList>
      <DevPopup.Default ref={DevPopupRef} width={250} height={200}  >
        {() => {
          return <span>确定要解除当前引用关系吗？</span>
        }}
      </DevPopup.Default>
    </div>
  )
});

export default DgAttach;
